/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="table-data auto-ml__table">
        <sf-grid>
            <sf-toolbar ref="toolbar">
                <sf-button
                    ref="submit"
                    class="creat-button btn-blank"
                    icon-cls="iconrefresh"
                    @click="_refresh">
                    <lang>刷新</lang>
                </sf-button>
                <sf-searchfield
                    v-model="searchParams.keyword"
                    class="pull-right"
                    placeholder="请输入关键字"
                    @clear="onEnterkey"
                    @trigger="onEnterkey" />
            </sf-toolbar>
            <sf-table
                ref="autoMLTable"
                :options="options_fix"
                @pagechange="_onPageChange"
                @sizechange="_onSizeChange">
                <sf-table-column :default-width="30"
                                 type="index">
                    <lang>序号</lang>
                </sf-table-column>
                <sf-table-column data-index="createTime"
                                 :default-width="60">
                    <lang>开始时间</lang>
                </sf-table-column>
                <sf-table-column data-index="name"
                                 :default-width="60">
                    <lang>实验名称</lang>
                </sf-table-column>
                <sf-table-column data-index="status"
                                 :default-width="60">
                    <lang>状态</lang>
                </sf-table-column>
                <sf-table-column data-index="taskNum"
                                 :default-width="40">
                    <lang>任务总数</lang>
                </sf-table-column>
                <sf-table-column data-index="successTaskNum"
                                 :default-width="40">
                    <lang>成功任务</lang>
                </sf-table-column>
                <sf-table-column data-index="runningNum"
                                 :default-width="40">
                    <lang>运行任务</lang>
                </sf-table-column>
                <sf-table-column data-index="failedTaskNum"
                                 :default-width="40">
                    <lang>失败任务</lang>
                </sf-table-column>

                <sf-table-column data-index="opr"
                                 :default-width="80">
                    <lang>操作</lang>
                </sf-table-column>
                <template slot="createTime"
                          slot-scope="{record}">
                    {{ encodeTime(record.createTime) }}
                </template>
                <template slot="successTaskNum"
                          slot-scope="{record}">
                    <div class="success">
                        {{ record.successTaskNum }}
                    </div>
                </template>
                <template slot="runningNum"
                          slot-scope="{record}">
                    <div class="running">
                        {{ record.runningNum }}
                    </div>
                </template>
                <template slot="failedTaskNum"
                          slot-scope="{record}">
                    <div class="failed">
                        {{ record.failedTaskNum }}
                    </div>
                </template>
                <template slot="status"
                          slot-scope="{record}">
                    <div class="task-flex"
                         :class="repositoryStatusClass(record.status)">
                        <span class="status-img task-common"></span>
                        <span class="status-text">{{ repositoryStatusText(record.status) }}</span>
                    </div>
                </template>
                <template slot="createTime"
                          slot-scope="{record}">
                    {{ encodeTime(record.createTime) }}
                </template>
                <template slot="opr"
                          slot-scope="{record}">
                    <div class="opr">
                        <a
                            class="link-btn"
                            @click="_enterAutoMlDetail(record)">
                            <lang>查看详情</lang>
                        </a>
                        <a
                            class="link-btn"
                            @click="_deleteAutoMl(record)">
                            <lang>删除</lang>
                        </a>
                    </div>
                </template>
            </sf-table>
        </sf-grid>
    </div>
</template>
<script>
import {
    encodeDate
} from 'src/util/format';
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
const PAGE_COUNT = 10;

/* 训练状态 */
const REPOSITORY_STATUS_TEXT = {
    0:_('任务完成'),
    1:_('任务中'),
    2:_('任务失败'),
    3:_('任务异常'),
    4:_('任务终止'),
    5:_('任务创建中')
};
const REPOSITORY_STATUS_CLASS = {
    0:'task-success',
    1:'task-run',
    2:'task-fail',
    3:'task-fail',
    4:'task-fail',
    5:'task-run'
};

import { setStorage } from 'src/util/local_storage';

export default {
    name: 'AutoMLTable',
    components: {
    },
    data () {
        return {
            options_fix: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true,
                pagination: {
                    activePage: 1,
                    pageSize: PAGE_COUNT,
                    pageSizes: [Number('10'), Number('20'), Number('50')],
                    layout: [ 'pager', 'sizes', 'jumper']
                }
            },
            searchParams: {
                keyword: '',
                algorithmName: '',
                pageSize: PAGE_COUNT,
                pageNum: 0
            },

            // showEmptytraining: false,
            trainingIdList: []
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        }
    },
    mounted () {
        this.refreshGrid();
    },
    methods: {
        onEnterkey () {
            this.refreshGrid();
        },

        // 刷新grid
        async refreshGrid () {
            this.searchParams.resourceId = this.projectId;
            const TRAINING_GET_URL = trainingUrlAdapter(`project/${this.projectId}/autoMlExperiment`);
            this.$mask();
            let jsonData = await this.$ajax.get(TRAINING_GET_URL, this.searchParams);
            this.$unmask();
            let { success, msg, data } = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            let table = this.$refs.autoMLTable;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                table.loadData([]);
                return;
            }
            if (!table) {
                return;
            }

            // this.showEmptytraining = data.list.length === 0;
            table.loadData(data.list || []);
            table.getPagination().setTotal(data.total);

            // this.showEmptytraining = data.list.length === 0;
        },
         encodeTime (time) {
            return encodeDate(time);
        },
        _onPageChange (pageNum) {
            Object.assign(this.searchParams, {
                pageNum: pageNum - 1
            });
            this.refreshGrid();
        },
        _onSizeChange (nowPageIndex, nowPageSize) {
            Object.assign(this.searchParams, {
                pageNum: nowPageIndex - 1,
                pageSize: nowPageSize
            });
            this.refreshGrid();
        },
        repositoryStatusClass (status) {
            return REPOSITORY_STATUS_CLASS[status];
        },
        repositoryStatusText (status) {
            return REPOSITORY_STATUS_TEXT[status];
        },

        _refresh () {
            this.refreshGrid();
        },
        _enterAutoMlDetail (item) {
            setStorage('autoMlInfo', JSON.stringify(item));
            this.$router.push({
                path: `/project_manager/interact_auto_ml_detail`,
                query: Object.assign(this.$route.query, {autoMlName:item.name})
            });
        },
         async ajaxDeleteAutoMlExperiment (record) {
            const DELETE_URL = trainingUrlAdapter(`autoMlExperiment/${record.id}`);
            this.$mask();
            let jsonData = await this.$ajax.delete(DELETE_URL);
            this.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.$ok(_('删除成功'));
            this.refreshGrid();
        },
        _deleteAutoMl (record) {
            this.$confirm({
                title: _('提示'),
                subTitle: _('确定要删除{0}该automl吗？', record.name),
                msg: _('删除后，操作无法撤回，请谨慎操作！'),
                icon: 'warning',
                autoClose: true,
                callback: actionName => {
                    if (actionName === 'submit') {
                        this.ajaxDeleteAutoMlExperiment(record);
                    }
                }
            });
        }
    }

};
</script>
<style lang="less">
.auto-ml__table {
    height: 100%;
    position: relative;
    overflow: hidden;
}

</style>
